<template>
  <div class='container'>
    <el-card>
      <!-- 顶部的新增和信息 -->
      <el-row style="margin-bottom: 20px">
        <el-col :span="20"><span class="leftInfo">说明：目前支持学科和关键字条件筛选</span></el-col>
        <el-col :span="4" class="rightButton">
          <el-button @click="$router.push('/questions/new')" type="success" size="small">+ 新增试题</el-button>
        </el-col>
      </el-row>
      <!-- 顶部的各个表单按钮 -->
      <ChoiceQuestionsForm @searchQuestions="searchQuestions"></ChoiceQuestionsForm>
      <!-- 标签页 -->
        <el-tabs  v-model="activeName" type="card" @tab-click="clickTab">
         <el-tab-pane lazy label="全部" name="all"><QuestionTable :ref="`table${activeName}`" :chkOBJ="chkOBJ" :chkState="activeName"></QuestionTable></el-tab-pane>
         <el-tab-pane lazy label="待审核" name="0"><QuestionTable :ref="`table${activeName}`" :chkOBJ="chkOBJ" :chkState="activeName"></QuestionTable></el-tab-pane>
         <el-tab-pane lazy label="已审核" name="1"><QuestionTable :ref="`table${activeName}`" :chkOBJ="chkOBJ" :chkState="activeName"></QuestionTable></el-tab-pane>
         <el-tab-pane lazy label="已拒绝" name="2"><QuestionTable :ref="`table${activeName}`" :chkOBJ="chkOBJ" :chkState="activeName"></QuestionTable></el-tab-pane>
        </el-tabs>
    </el-card>
  </div>
</template>

<script>
import ChoiceQuestionsForm from '@/module-hmmm/components/ChoiceQuestionsForm'
import QuestionTable from '@/module-hmmm/components/QuestionTable'
export default {
  components: { ChoiceQuestionsForm, QuestionTable },
  data () {
    return {
      activeName: 'all',
      chkOBJ: {}
    }
  },
  methods: {
    clickTab () {
      console.log(this.activeName)
    },
    // 子传父获取子组件传递的数据-->再向表格组件传递数据
    searchQuestions (checkedObj) {
      this.chkOBJ = checkedObj
      this.$refs[`table${this.activeName}`].getTableData(checkedObj)
    }
  }
}
</script>

<style scoped lang='scss'>
  .container{
    padding: 10px;
    .rightButton{
      display: flex;
      justify-content: flex-end;
    }
    .leftInfo{
      font-size: 12px;
       color: pink;
    }
  }
</style>
